<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" class="side">
    <div class="logo">
      <img
        :src="Logo"
        alt=""
        :style="{ height: isCollapse ? '30px' : '160px' }"
        class="logo-img"
      />
    </div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      :default-active="$route.path"
      text-color="#fff"
      router
      unique-opened
      :collapse="isCollapse"
    >
      <el-menu-item index="/home">
        <el-icon>
          <House />
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="/advise">
        <template #title>
          <el-icon>
            <CopyDocument />
          </el-icon>
          <span>意见管理</span>
        </template>
        <el-menu-item index="/advise/list">
          <el-icon>
            <CopyDocument />
          </el-icon>
          意见列表
        </el-menu-item>
        <el-menu-item index="/advise/add">
          <el-icon>
            <CopyDocument />
          </el-icon>
          意见新增
        </el-menu-item>
        <el-menu-item index="/advise/bad">
          <el-icon>
            <CopyDocument />
          </el-icon>
          投诉
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/anno">
        <template #title>
          <el-icon>
            <Tickets />
          </el-icon>
          <span>公告管理</span>
        </template>
        <el-menu-item index="/anno/list">
          <el-icon>
            <Tickets />
          </el-icon>
          公告列表
        </el-menu-item>
        <el-menu-item index="/anno/add">
          <el-icon>
            <Tickets />
          </el-icon>
          公告新增
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="role">
        <!-- 权限这个大左说现在没有写，回来了会写的 -->
        <template #title>
          <el-icon>
            <Lock />
          </el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/role/set">
          <el-icon>
            <Lock />
          </el-icon>
          权限列表
        </el-menu-item>
        <el-menu-item index="/role/list">
          <el-icon>
            <Lock />
          </el-icon>
          权限设置
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/user">
        <template #title>
          <el-icon>
            <Help />
          </el-icon>
          <span>社区人员管理</span>
        </template>
        <el-menu-item index="/user/list">
          <el-icon>
            <Help />
          </el-icon>
          人员列表
        </el-menu-item>
        <el-menu-item index="/user/add">
          <el-icon>
            <Help />
          </el-icon>
          人员操作
        </el-menu-item>
        <el-menu-item index="/user/data">
          <el-icon>
            <Help />
          </el-icon>
          人员信息
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/health">
        <template #title>
          <el-icon>
            <Coin />
          </el-icon>
          <span>健康管理</span>
          <!-- 这些没有配路由，所以写不了 -->
        </template>
        <el-menu-item index="/health/nuc">
          <el-icon>
            <Coin />
          </el-icon>
          核酸状态
        </el-menu-item>
        <el-menu-item index="/health/tra">
          <el-icon>
            <Coin />
          </el-icon>
          出行状态
        </el-menu-item>
        <el-menu-item index="/health/vac">
          <el-icon>
            <Coin />
          </el-icon>
          疫苗状态
        </el-menu-item>
        <el-menu-item index="/nucadd">
          <el-icon>
            <Coin />
          </el-icon>
          核酸新增
        </el-menu-item>
        <el-menu-item index="/traadd">
          <el-icon>
            <Coin />
          </el-icon>
          出行新增
        </el-menu-item>
        <el-menu-item index="/vacadd">
          <el-icon>
            <Coin />
          </el-icon>
          疫苗新增
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/shop">
        <template #title>
          <el-icon>
            <Monitor />
          </el-icon>
          <span>社区内购</span>
          <!-- 这个也没有配路由 -->
        </template>
        <el-menu-item index="/shop/display">
          <el-icon>
            <Monitor />
          </el-icon>
          商城展示
        </el-menu-item>
        <el-menu-item index="/shop/cart">
          <el-icon>
            <Monitor />
          </el-icon>
          我的购物车
        </el-menu-item>
        <el-menu-item index="/shop/bill">
          <el-icon>
            <Monitor />
          </el-icon>
          我的订单
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/mine">
        <el-icon>
          <User />
        </el-icon>
        <span>个人中心</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import Logo from "@/assets/images/logo.png";
import {
  House,
  User,
  Tickets,
  CopyDocument,
  Lock,
  Help,
  Coin,
  Monitor,
} from "@element-plus/icons-vue";
// 还有一个展开回收的按钮，从pinia中引入,等写完头部再引入
import { useStore } from "@/store";
const isCollapse = computed(() => useStore().isCollapse);
</script>

<style lang="scss" scoped>
.logo {
  width: 100%;
  padding: 20px;
  .logo-img {
    width: 100%;
    height: 160px;
    border-radius: 50%;
  }
}
.side {
  min-height: 100%;
  overflow: auto;
  background: #545c64;
  .menu {
  }
}
</style>
